<template>
	<div class="seasonal_one">
		<ul>
			<li class="tw" v-for="item in img" :key="item.id">
				<img :src="item.picture"/>
				<p>{{item.txt1}}</p>
				<span>{{item.txt2}}</span>
			</li>
		</ul>
		<ol>
			<li class="two" v-for="item in txt" :key="item.id">
				<button>{{item.title}}</button>
				<span v-if="item.txt1!=undefined">{{item.txt1}}</span>
			</li>
		</ol>
	</div>
</template>

<script>
	export default{
		name:'Seasonal_two',
		data(){
			return{
				img:[
					{id:1,picture:'jmimg/1.jpg',txt1:'牛背山',txt2:'王者归来'},
					{id:2,picture:'jmimg/2.jpg',txt1:'西双版纳',txt2:'高铁开通'},
					{id:3,picture:'jmimg/3.jpg',txt1:'九寨沟',txt2:'冰雪仙境'},
				],
				txt:[
					{id:1,title:'长白山',txt1:'冰封天池'},
					{id:2,title:'潮汕'},
					{id:3,title:'林芝'},
					{id:4,title:'怒江'},
					{id:5,title:'四姑娘山',txt1:'跨年登高'},
					{id:6,title:'泉州'},
					
				]
			}
		}
		
	}
</script>

<style scoped>
	.seasonal_one{
		width: 98%;
		overflow: hidden;
		margin: 0 auto;
	}
	.seasonal_one ul{
		width: 99%;
		margin: 0 auto;
	}
	.seasonal_one .tw{
		margin-top: 0.5rem;
		text-align: center;
		width: 33%;
		float: left;
		height: 12rem;
	}
	.seasonal_one img{
		width: 98%;
		height: 100%;
		border-radius: 1rem 1rem 0rem 0rem;
		vertical-align: middle;
		background-size: 100% 100%;
	}

	
	.seasonal_one ol{
		width: 99%;
		margin: 0 auto;
	}
	.seasonal_one .two{
		text-align: center;
		margin-top: 0.5rem;
		width: 33%;
		float: left;
		position: relative;
	}
	
	.seasonal_one button{
		width: 92%;
		line-height: 3rem;
		font-weight: bolder;
		border: 0.1rem solid #b9b9b9;
		border-radius: 0.5rem;
		font-weight: bolder;
		background-color: white;
		color: black;
		
	}
	.seasonal_one .two span{
		position: absolute;
		color: black;
		top: 0rem;
		left: 0.4rem;
		width: 4rem;
		height: 1.2rem;
		line-height: 1.2rem;
		background-color: #ffdd3f;
		border-radius: 0.5rem 0 0.5rem 0;
		
	}
	
	.seasonal_one li p{
		position: relative;
		font-weight: bolder;
		font-size: 1.3rem;
		bottom: 3.5rem;
		color: white;
	}
	.seasonal_one li span{
		position: relative;
		bottom: 3rem;
		font-size: 0.8rem;
		color: #b7b7b7
	}
</style>
